<template>
<div class="design-item-list" :class="{heightLight : current == imageForm.itemId}">
	<div class="design-title-wrap">
		<!-- 轮播大图 --><swiper-full-big v-if="isSelected === 'swiper-full-big'" :bigArr="items" :id="id" :pagination="imageForm.pagination"></swiper-full-big>
		<!-- 轮播小图 --><swiper-full-small v-if="isSelected === 'swiper-full-small'" :smallArr="items" :id="id" :pagination="imageForm.pagination"></swiper-full-small>
		<!-- 卡片式1 --><swiper-theme1 v-if="isSelected === 'swiper-card-h-theme1'" :theme1Arr="items" :id="id" :pagination="imageForm.pagination"></swiper-theme1>
		<!-- 卡片式2 --><swiper-theme2 v-if="isSelected === 'swiper-card-h-theme2'" :theme2Arr="items" :id="id" :cardtheme2="cardtheme2" :pagination="imageForm.pagination"></swiper-theme2>
		<!--  :multipleItem="imageForm.multipleItem" -->
		<!-- 每行一列 --><box-line v-if="isSelected==='fix-box-line'" :lineArr="items" :gap="imageForm.gap"></box-line>
		<!-- 导航横向滑动 --><swiper-horizontal v-if="isSelected==='swiper-horizontal'" :horizontalArr="items" :id="id" :gap="imageForm.gap"></swiper-horizontal>
		<!--  每行两列 --><box-two-col v-if="isSelected==='fix-box-twoCol'" :twoColArr="items" :gap="imageForm.gap" :padding="imageForm.padding"></box-two-col>
		<!-- 每行三列 --><box-three-col v-if="isSelected==='fix-box-threeCol'" :threeColArr="items" :gap="imageForm.gap" :padding="imageForm.padding"></box-three-col>
		<!-- 每行四列  --><box-four-col v-if="isSelected==='fix-box-fourCol'" :fourColArr="items" :gap="imageForm.gap" :padding="imageForm.padding"></box-four-col>
		<!-- 左1右2 --><box-left-right v-if="isSelected==='fix-box-leftRight'" :leftRightArr="items" :gap="imageForm.gap" :padding="imageForm.padding"></box-left-right>
	</div>
	<div class="design-edit" v-show="(current == imageForm.itemId) && imageForm.toolbarEdit && !imageForm.toolbarComponents">
		<h4 class="edit-title"><span>图片</span></h4>
		<div class="imgset clearfix">
			<p>选择样式</p>
			<ul class="imgsetList">
				<li :class="isSelected == sitem.type ? 'is-selected' : ''" @click.stop="selImgType(sitem.type)" v-for="(sitem, sidx) in this.globalVar.imgsetList" :key="sidx">
					<i :class="sitem.icon"></i>
					<div>{{sitem.name}}</div>
				</li>
			</ul>
		</div>
		<el-form :model="imageForm" class="demo-ruleForm">
			<el-form-item label="开启页码" v-show="isSelected=='swiper-full-big' || isSelected=='swiper-full-small' || isSelected=='swiper-card-h-theme1' || isSelected=='swiper-card-h-theme2'">
				<el-switch v-model="imageForm.pagination" active-text="开" inactive-text="关" @change="changeStatus(imageForm)"></el-switch>
			</el-form-item>
			<el-form-item label="首屏个数" v-show="isSelected=='swiper-card-h-theme2'">
				<el-select v-model="imageForm.multipleItem" @change="changeStatus(imageForm)">
					<el-option label="1个" value="1个"></el-option>
					<el-option label="2个" value="2个"></el-option>
					<el-option label="3个" value="3个"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开启留白" v-show="isSelected=='fix-box-line' || isSelected=='fix-box-twoCol' || isSelected=='fix-box-threeCol' || isSelected=='fix-box-fourCol' || isSelected=='fix-box-leftRight'">
				<el-switch v-model="imageForm.padding" active-text="开" inactive-text="关" @change="changeStatus(imageForm)"></el-switch>
			</el-form-item>
			<el-form-item label="图片间隙" v-show="isSelected=='fix-box-line' || isSelected=='swiper-horizontal' || isSelected=='fix-box-twoCol' || isSelected=='fix-box-threeCol' || isSelected=='fix-box-fourCol' || isSelected=='fix-box-leftRight'">
				<div class="block" style="margin-left: 80px;">
					<el-slider v-model="imageForm.gap" @change="changeStatus(imageForm)"></el-slider>
				</div>
			</el-form-item>
			<el-form-item label="添加图片" v-show="uploadShow">
					<div class="clearfix" style="margin-left: 80px;">
						<el-upload
							class="upload-demo clearfix"
							:action="this.globalVar.uploadFile"
							:show-file-list="false"
							accept="image/jpeg,image/jpg,image/png"
							:on-success="imageUploadAllSuccess"
							>
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='swiper-full-big'">建议图片尺寸750X750px，单张图片大小150kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='swiper-full-small'">建议图片尺寸750X375px，单张图片大小100kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='swiper-card-h-theme1'">建议图片尺寸670X325px，单张图片大小100kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='swiper-card-h-theme2'">建议图片尺寸480X360px，单张图片大小100kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='fix-box-line'">建议图片尺寸750X400px，单张图片大小100kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='swiper-horizontal'">建议图片尺寸200X90px，单张图片大小10kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='fix-box-twoCol'">建议图片尺寸335X254px，单张图片大小50kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='fix-box-threeCol'">建议图片尺寸218X218px，单张图片大小30kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='fix-box-fourCol'">建议图片宽度为180px</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='fix-box-leftRight'">左侧图尺寸375X750px，单张图片大小100kb以内，右侧两张图尺寸375X375px，单张图片大小60kb以内</div>
							<div class="el-upload__tip" slot="tip" v-if="isSelected=='hotarea'">建议图片宽度为750px</div>
						</el-upload>
					</div>
			</el-form-item>
			<el-row>
				<div class="el-form-drag" v-if="imageForm.items.length">
					<div class="el-form-item-tip">拖动下方卡片可调换图片顺序</div>
					<ul class="el-form-ul">
						<draggable :options="{group:'people'}" @change="changeStatus(imageForm)" v-model="imageForm.items" class="dragArea" >
							<li class="upload-item" v-for="(imgItem, imgidx) in imageForm.items" :key="imgidx">
								<div class="upload-edit-list">
									<div class="upload-img">
										<div class="upload-img-content">
											<img v-if="imgItem.url" :src="imgItem.url"/>
											<el-upload v-else
												class="imgItems clearfix"
												:action="this.globalVar.uploadFile"
												:show-file-list="false"
												accept="image/jpeg,image/jpg,image/png"
												:on-success="(res, file) => {imageUploadSuccess(res, file, imgItem.imgid)}"
											>
												<i slot="default" class="el-icon-plus"></i>
												<p>添加图片</p>	
											</el-upload>
											<div class="upload-del" v-if="imgItem.url"><i class="el-icon-delete" @click.stop="imgremove(imgItem.imgid)"></i></div>
										</div>
									</div>
									<div class="upload-edit">
										<div class="edit-label">链接类型</div>
										<div class="edit-val">
											<el-select v-model="imgItem.name" placeholder="请选择" style="width: 289px;" @change="changeStatus(imageForm)">
												<el-option label="微信公众号网页" value=""></el-option>
											</el-select>
										</div>
									</div>
								</div>
								<div class="upload-edit-list is-one-line">
									<div class="edit-label">图片链接</div>
									<div class="edit-val"><el-input placeholder="请输入链接" v-model="imgItem.link" @change="changeStatus(imageForm)"></el-input></div>
								</div>
								<i class="el-icon-close" @click.stop="delItem(imgItem.imgid)"></i>
							</li>
						</draggable>
					</ul>
				</div>
			</el-row>
		</el-form>
	</div>
</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import draggable from 'vuedraggable'

import swiperFullBig from './swiper/swiperFullBig'
import swiperFullSmall from './swiper/swiperFullSmall'
import swiperTheme1 from './swiper/swiperTheme1'
import swiperTheme2 from './swiper/swiperTheme2'
import boxLine from './swiper/boxLine'
import swiperHorizontal from './swiper/swiperHorizontal'
import boxTwoCol from './swiper/boxTwoCol'
import boxThreeCol from './swiper/boxThreeCol'
import boxFourCol from './swiper/boxFourCol'
import boxLeftRight from './swiper/boxLeftRight'
import {createRandomId} from '@/tools/util'
export default {
	components: {draggable, swiperFullBig, swiperFullSmall, swiperTheme1, swiperTheme2, boxLine, swiperHorizontal, boxTwoCol, boxThreeCol, boxFourCol, boxLeftRight},
	data(){
		return {
			id: '',
			swiper:[],//轮播
			items:[""],//实际接收图片list
			isSelected: this.imageForm.type,//默认选择轮播大图
			cardtheme2: {
				height: "203px",
				slidesPerView: 1.3
			},
			uploadShow: true,//显示上传图片
		}
	},
	props:{
		imageForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String,
	},
	mounted(){ 
		this.id = createRandomId();
		this.selImgType(this.imageForm.type);
	},
	methods:{
		changeStatus(form){
			if(form.type == 'swiper-card-h-theme2'){
				if(form.multipleItem == "1个"){
					this.cardtheme2.height = "203px";
					this.cardtheme2.slidesPerView = 1.3;
					this.items = this.imageForm.items.length ? this.imageForm.items : ["", ""];
				}else if(form.multipleItem == "2个"){
					this.cardtheme2.height = "112px";
					this.cardtheme2.slidesPerView = 2.3;
					this.items = this.imageForm.items.length ? this.imageForm.items : ["", "", ""];
				}else if(form.multipleItem == "3个"){
					this.cardtheme2.height = "76px";
					this.cardtheme2.slidesPerView = 3.3;
					this.items = this.imageForm.items.length ? this.imageForm.items : ["", "", "", ""];
				}
			}
			this.$emit("childChange",form);
		},
		// 选择图片类型
		selImgType(type, form){
			this.isSelected = type;
			this.imageForm.type = type;
			// this.uploadShow = true;
			// this.$emit("childChange",this.imageForm);
			// if(!form){
				this.imageForm.gap = 0;
				this.imageForm.padding = false;
				this.imageForm.pagination = false;
				this.imageForm.multipleItem = "1个";
			// }
			switch(type){
				case "swiper-full-big":
					this.imageForm.pagination = form ? this.imageForm.pagination : true;
					this.items = this.imageForm.items.length ? this.imageForm.items : [""];
					break;
				case "swiper-full-small":
					this.imageForm.pagination = form ? this.imageForm.pagination : true;
					this.items = this.imageForm.items.length ? this.imageForm.items : [""];
					break;
				case "swiper-card-h-theme1":
					this.imageForm.pagination = form ? this.imageForm.pagination : true;
					this.items = this.imageForm.items.length ? this.imageForm.items : ["", ""];
					break;
				case "swiper-card-h-theme2":
					this.imageForm.pagination = form ? this.imageForm.pagination : true;
					this.imageForm.multipleItem = this.imageForm.multipleItem!="1个" ? this.imageForm.multipleItem : "1个";
					this.changeStatus(this.imageForm);
					// this.items = this.imageForm.items.length ? this.imageForm.items : ["", ""];
					break;
				case "fix-box-line":
					this.imageForm.padding = form ? this.imageForm.padding : false;
					this.imageForm.gap = form ? this.imageForm.gap : 15;
					this.items = this.imageForm.items.length ? this.imageForm.items : [""];
					break;
				case "swiper-horizontal":
					this.imageForm.gap = form ? this.imageForm.gap : 6;
					this.items = this.imageForm.items.length ? this.imageForm.items : ["","",""];
					break;
				case "fix-box-twoCol":
					this.imageForm.padding = form ? this.imageForm.padding : true;
					this.imageForm.gap = form ? this.imageForm.gap : 10;
					if(this.imageForm.items.length){
						this.imageForm.items.length >= 2 && (this.uploadShow = false);
						if(this.imageForm.items.length > 2) {
							this.items = this.imageForm.items.splice(2, this.imageForm.items.length);
						}else this.items = this.imageForm.items;
					}else{
						this.items = ["",""];
					}
					break;
				case "fix-box-threeCol":
					this.imageForm.padding = form ? this.imageForm.padding : true;
					this.imageForm.gap = form ? this.imageForm.gap : 10;
					// this.items = this.imageForm.items.length ? this.imageForm.items : ["","",""];
					if(this.imageForm.items.length){
						this.imageForm.items.length >= 3 && (this.uploadShow = false);
						if(this.imageForm.items.length > 3) {
							
							this.items = this.imageForm.items.splice(3, this.imageForm.items.length);
						}else this.items = this.imageForm.items;
					}else{
						this.items = ["","",""];
					}
					break;
				case "fix-box-fourCol":
					this.imageForm.padding = form ? this.imageForm.padding : false;
					this.imageForm.gap = form ? this.imageForm.gap : 6;
					// this.items = this.imageForm.items.length ? this.imageForm.items : ["","","",""];
					if(this.imageForm.items.length){
						this.imageForm.items.length >= 4 && (this.uploadShow = false);
						if(this.imageForm.items.length > 4) {
							this.items = this.imageForm.items.splice(4, this.imageForm.items.length);
						}else this.items = this.imageForm.items;
					}else{
						this.items = ["","","",""];
					}
					break;
				case "fix-box-leftRight":
					this.imageForm.padding = form ? this.imageForm.padding : false;
					this.imageForm.gap = form ? this.imageForm.gap : 6;
					// this.items = this.imageForm.items.length ? this.imageForm.items : ["","",""];
					if(this.imageForm.items.length){
						this.imageForm.items.length >= 3 && (this.uploadShow = false);
						if(this.imageForm.items.length > 3) {
							this.items = this.imageForm.items.splice(3, this.imageForm.items.length);
						}else this.items = this.imageForm.items;
					}else{
						this.items = ["","",""];
					}
					break;
				case "hotarea":
					if(this.imageForm.items.length){
						this.imageForm.items.length >= 1 && (this.uploadShow = false);
						if(this.imageForm.items.length > 1) {
							this.items = this.imageForm.items.splice(1, this.imageForm.items.length);
						}else this.items = this.imageForm.items;
					}else{
						this.items = [""];
					}
					break;
			}
			// this.$emit("childChange",this.imageForm);
		},
		imageUploadAllSuccess(res){
			let obj = {
				"link": "",//图片链接
				"url": res.url,//图片路径
				"name": "",//微信公众号网页
				"miniProgram": false,
				"miniType": false,
				"miniAppid": "",
				"imgid": createRandomId(),//添加图片的id
				"uid": 0,
			}
			this.imageForm.items.push(obj);
			this.$emit("childChange",this.imageForm);
		},
		imageUploadSuccess(res, file, imgid) {
			 this.imageForm.items.map((item) => {
				(item.imgid == imgid) && (item.url = res.url)
			});
			this.$emit("childChange",this.imageForm);
		},
		imgremove(imgid){
			this.imageForm.items.map((item) => {
				(item.imgid == imgid) && (item.url = "")
			});
			this.$emit("childChange",this.imageForm);
		},
		delItem(imgid){
			this.imageForm.items.splice(this.imageForm.items.findIndex(item => item.imgid === imgid), 1);
			this.selImgType(this.imageForm.type, this.imageForm);
			this.$emit("childChange", this.imageForm);
			
		},
	},
	watch: {
		'imageForm.items':{
			handler:function(val,old){
				val.length && (this.items = val);
				switch (this.imageForm.type) {
					case 'fix-box-twoCol':
						val.length >= 2 && (this.uploadShow = false);
						val.length < 2 && (this.uploadShow = true);
						break;
					case 'fix-box-threeCol':
						val.length >= 3 && (this.uploadShow = false);
						val.length < 3 && (this.uploadShow = true);
						break;
					case 'fix-box-fourCol':
						val.length >= 4 && (this.uploadShow = false);
						val.length < 4 && (this.uploadShow = true);
						break;
					case 'fix-box-leftRight':
						val.length >= 3 && (this.uploadShow = false);
						val.length < 3 && (this.uploadShow = true);
						break;
					case 'hotarea':
						val.length >= 1 && (this.uploadShow = false);
						val.length < 1 && (this.uploadShow = true);
						break;
					default:
						this.uploadShow = true;
						break;
				}
			},
			deep:true
		},
		imageForm(val) {
			this.selImgType(this.imageForm.type, this.imageForm);
		},
	}
}
</script>
<style lang="less" scoped>
@import "../../../../static/css/style.less";
@import "../../../../static/css/element.less";
@import "../../../../static/css/imgStyle.less";
.banner-num{
	text-align: right;
	padding-right: 30px;
	color: #fff;
	font-size: 13px;
}
.el-form-item {
    margin-bottom: 22px;
}
.el-upload{
	// float: left;
}
.el-upload__tip {
	// float: left;
    font-size: 12px;
    color: #606266;
	margin-top: 7px;
	line-height: 24px;
}
.el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.el-select-dropdown__item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

</style>

